<template>
  <div class="content">
    <div></div>
    <div class="table">
      <gridTable
        :columns="state.columns"
        :data="state.data"
        :action-func="actionhandle"
        :pagination="state.pagination"
        :page-change="pageChange"
      >
      </gridTable>
    </div>
    <a-modal
      v-model:visible="state.visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template #title> 审核状态 </template>
      <div>
        <a-radio-group v-model="state.key">
          <a-radio value="0">未完成</a-radio>
          <a-radio value="1">已完成</a-radio>
        </a-radio-group>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
import {
  Message,
  type TableColumnData,
  type TableData,
  type TableRowSelection,
} from "@arco-design/web-vue";
import gridTable from "@/components/table/gridTable.vue";
import { reactive } from "vue";
import { serviceApi } from "@/api/index";

const renderImg = ({ column, record }) => {
  //  console.log(column.dataIndex);
  //  console.log(record[column.dataIndex]);
  return (
    <div>
      <a-image width="100" src={record[column.dataIndex]}></a-image>
    </div>
  );
};
const renderState = ({ column, record }) => {
  //  console.log(column.dataIndex);
  //  console.log(record[column.dataIndex]);
  const state = record[column.dataIndex];
  switch (state) {
    case 0:
      return "已取消";
    case 1:
      return "已支付";
    case 2:
      return "待支付";
  }
};
const jobnumber =
  localStorage.getItem("userRole") === "admin"
    ? ""
    : localStorage.getItem("userJobnumber");
const state = reactive({
  columns: [
    {
      title: "预约编号",
      dataIndex: "id",
    },
    {
      title: "科室名称",
      dataIndex: "name",
    },
    {
      title: "科室分类",
      dataIndex: "classify",
    },
    {
      title: "护士服务",
      dataIndex: "servicename",
    },
    {
      title: "费用",
      dataIndex: "fees",
    },
    {
      title: "图片",
      dataIndex: "avgPath",
      render: renderImg,
    },
    {
      title: "服务地址",
      dataIndex: "address",
    },
    {
      title: "预约时间",
      dataIndex: "time",
    },
    {
      title: "用户账号",
      dataIndex: "phone",
    },
    {
      title: "用户姓名",
      dataIndex: "realName",
    },
    {
      title: "护士工号",
      dataIndex: "jobnumber",
    },
    {
      title: "护士姓名",
      dataIndex: "userName",
    },
    {
      title: "状态",
      dataIndex: "isfinish",
    },
    {
      title: "是否支付",
      dataIndex: "state",
      render: renderState,
    },
    {
      title: "操作",
      slotName: "optional",
      action: [
        // {
        //   text: "详情",
        //   value: "detail",
        // },
        {
          text: "修改",
          value: "revise",
        },
        // {
        //   text: "删除",
        //   value: "delete",
        // },
      ],
    },
  ],
  data: [] as unknown as TableColumnData[],
  pagination: {
    current: 1,
    pageSize: 7,
    total: 0,
  },
  searchLoading: false,
  searchKey: "",
  role: "nurse",
  visible: false,
  key: 0,
  id: "",
});
// 分页
const pageChange = (page) => {
  // console.log(page);
  state.pagination.current = page;
};
//操作
const actionhandle = (key, data) => {
  console.log(key, data);
  switch (key) {
    case "detail":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "revise":
      console.log(data);
      state.id = data.id;
      state.visible = true;
      break;
    case "delete":
      console.log(data.id);
      break;
  }
};
// 修改服务信息状态
const changeState = async (id, isfinish) => {
  await serviceApi
    .changeServiceInfo({ id, isfinish })
    .then((res) => {
      console.log(res);
      Message.success({
        content: "审核成功",
        position: "top",
      });
      getData({ jobnumber, role: state.role });
    })
    .catch((err) => {
      console.log(err);
      Message.error({
        content: err.msg || "error",
        position: "top",
      });
    });
};
const handleOk = async () => {
  await changeState(state.id, state.key);
  state.visible = false;
  state.key = 2;
};
const handleCancel = () => {
  state.visible = false;
  state.key = 2;
};
// 获取数据
const getData = async (data) => {
  await serviceApi
    .getwxServiceInfo(data)
    .then((res) => {
      console.log(res);
      state.data = res.result;
      state.pagination.total = res.result.length;
    })
    .catch((err) => {
      console.log(err);
    });
  state.searchLoading = false;
};
getData({ jobnumber, role: state.role });
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
.table {
  width: 100%;
  height: 100%;
}
</style>
